<!--
 * @author: Spring
 * @create: 2021-06-23 18:23 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-05 14:35 PM
 * @desc: 
-->
<template>
  <div class="container">
    <div class="top">
      <div class="left" @mouseenter="enter">
        <div class="profile">
          <img
            :src="$image(info.icon)"
            onerror="onerror=null;src='https://sf1-ttcdn-tos.pstatp.com/img/mosaic-legacy/3795/3033762272~300x300.image'"
            alt=""
          />
        </div>
        <div class="info">
          <div class="name">{{ info.nick_name }}</div>
          <div class="tag_time">{{ info.updated_at }}</div>
        </div>
        <UserInfo class="userinfo" :info="info" :attention="attention" />
      </div>
      <div class="right" @click="attentionclicks(info.user_id)">
        {{ info.isgz ? "已关注" : "关注" }}
      </div>
    </div>
    <div class="content">
      <div class="text" v-html="info.info.content"></div>
      <div
        class="img"
        v-if="
          info.info.imgs &&
          info.info.imgs.length &&
          info.info.imgs instanceof Array
        "
      >
        <img
          v-for="(item, index) in info.info.imgs.slice(0, 2)"
          :key="index"
          :src="$image(item)"
          onerror="onerror=null;src='https://sf1-ttcdn-tos.pstatp.com/img/mosaic-legacy/3795/3033762272~300x300.image'"
          alt=""
        />
      </div>
    </div>
    <div class="label"></div>
    <!-- <div class="unfold">展开</div> -->
    <div class="handle">
      <div class="good" @click="like">
        <svg
          data-v-0754fb3d=""
          aria-hidden="true"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          class="icon like-icon"
        >
          <g data-v-0754fb3d="" fill="none" fill-rule="evenodd">
            <path data-v-0754fb3d="" d="M0 0h20v20H0z"></path>
            <path
              data-v-0754fb3d=""
              stroke="#8A93A0"
              stroke-linejoin="round"
              d="M4.58 8.25V17h-1.4C2.53 17 2 16.382 2 15.624V9.735c0-.79.552-1.485 1.18-1.485h1.4zM11.322 2c1.011.019 1.614.833 1.823 1.235.382.735.392 1.946.13 2.724-.236.704-.785 1.629-.785 1.629h4.11c.434 0 .838.206 1.107.563.273.365.363.84.24 1.272l-1.86 6.513A1.425 1.425 0 0 1 14.724 17H6.645V7.898C8.502 7.51 9.643 4.59 9.852 3.249A1.47 1.47 0 0 1 11.322 2z"
            ></path>
          </g></svg
        >点赞
      </div>
      <div class="comment" @click="comment">
        <svg
          data-v-0754fb3d=""
          aria-hidden="true"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          class="icon comment-icon"
        >
          <g data-v-0754fb3d="" fill="none" fill-rule="evenodd">
            <path data-v-0754fb3d="" d="M0 0h20v20H0z"></path>
            <path
              data-v-0754fb3d=""
              stroke="#8A93A0"
              stroke-linejoin="round"
              d="M10 17c-4.142 0-7.5-2.91-7.5-6.5S5.858 4 10 4c4.142 0 7.5 2.91 7.5 6.5 0 1.416-.522 2.726-1.41 3.794-.129.156.41 3.206.41 3.206l-3.265-1.134c-.998.369-2.077.634-3.235.634z"
            ></path>
          </g></svg
        >{{ info.comment_num > 0 ? info.comment_num : "评论" }}
      </div>
      <div class="share" @click="share">
        <svg
          data-v-0754fb3d=""
          aria-hidden="true"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          class="icon share-icon"
        >
          <g data-v-0754fb3d="" fill="none" fill-rule="evenodd">
            <path data-v-0754fb3d="" d="M0 0h20v20H0z"></path>
            <g
              data-v-0754fb3d=""
              stroke="#8A93A0"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                data-v-0754fb3d=""
                d="M10 2.5v10M13.5 7h2.001c.552 0 .999.437.999.96v8.621c0 1.919-1.447 1.919-1.999 1.919H5.5c-.552 0-1.999 0-1.999-1.919v-8.62c0-.53.443-.961.999-.961H6.5M7.519 4.538L10.019 2l2.5 2.513"
              ></path>
            </g>
          </g></svg
        >分享
      </div>
    </div>
    <Comment
      v-if="show.comment"
      :comment="info.comment"
      :article_id="info.article_id"
    />
  </div>
</template>

<script>
import Comment from "./Comment.vue";
import UserInfo from "./UserInfo.vue";
import { attention, concernList,concerndel } from "/utils/api.js";
export default {
  props: ["info"],
  data() {
    return {
      attentionclick: 1,
      comment_num: 0,
      attention: {},
      show: {
        comment: false,
      },
    };
  },
  components: {
    Comment,
    UserInfo,
  },
  mounted() {
    this.analysis();
  },
  methods: {
    self() {
      concernList({ user_id: this.$store.state.info.user_id }).then((res) => {
        console.log(res.data, 111);
        this.$store.commit("setFansInfo", res.data);
      });
    },
    enter() {
      concernList({ user_id: String(this.info.user_id) }).then((res) => {
        // console.log(res);
        this.attention = res.data;
      });
    },
    isJSON(str) {
      if (typeof str == "string") {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      }
      return false;
    },
    analysis() {
      // console.log(this.info);
      if (this.isJSON(this.info.info)) {
        this.info.info = JSON.parse(this.info.info);
      }
    },
    like() {
      this.$store.commit("judgeLogin");
    },
    comment() {
      this.$store.commit("judgeLogin");
      this.show.comment = !this.show.comment;
    },
    share() {
      this.$store.commit("judgeLogin");
    },
    //关注
    attentionclicks(be_concern_user_id) {
      if (!this.info.isgz) {
        attention({ be_concern_user_id, token: this.$store.state.token }).then(
          (res) => {
            console.log(res);
            this.$message('关注成功','success')
            this.info.isgz = true;
            this.self();
          }
        );
      }else{
        concerndel({ be_concern_user_id, token: this.$store.state.token }).then(
          (res) => {
            console.log(res);
            this.$message('取消成功','success')
            this.info.isgz = false;
            this.self();
          }
        );
      }
    },
  },
};
</script>
 

<style scoped lang="scss">
.container {
  width: 570px;
  background-color: #fff;
  box-sizing: border-box;
  padding-top: 16px;
  margin-bottom: 8px;
  z-index: 1;
  position: relative;
  .top {
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    height: 48px;
    margin: 0 auto;
    @include flex(space-between, center);
    .left {
      position: relative;
      @include flex(flex-start, center);
      cursor: pointer;
      z-index: 10;
      .profile {
        position: relative;
        width: 45px;
        height: 45px;
        z-index: 10;
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          z-index: -1;
        }
      }
      .info {
        position: relative;
        z-index: 10;
        @include flex(flex-start, flex-start, column);
        margin-left: 12px;
        .name {
          @include font(12px, #333, bold);
        }
        .tag_time {
          @include font(13px, #8a9aa9);
        }
      }
      .userinfo {
        z-index: 2000;
        display: none;
        width: 267px;
        height: 160px;
        background-color: #fff;
        border: 1px solid #ebebeb;
        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%);
        border-radius: 2px;
        box-sizing: border-box;
        padding: 15px 15px 18px;
        position: absolute;
        top: 45px;
        left: 0;
        z-index: 500;
      }
      &:hover .userinfo {
        display: block;
        z-index: 9999;
      }
    }
    .right {
      border: 1px solid #6cbd45;
      width: 55px;
      height: 26px;
      @include font(13px, #6cbd45);
      cursor: pointer;
      @include flex(center, center);
    }
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding-left: 77px;
    padding-right: 48px;
    margin-top: 5px;
    .text {
      overflow: hidden;
      @include font(12px, #333);
    }
    .img {
      width: 200px;
      height: 200px;
      @include flex(flex-start);
      img {
        width: 200px;
        height: 200px;
        margin-right: 5px;
      }
    }
  }
  .label {
    margin-top: 10px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 77px;
    @include font(14px, #1d7dfa);
  }
  .unfold {
    margin-top: 10px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 77px;
    @include font(14px, #1d7dfa);
  }
  .handle {
    margin-top: 16px;
    border: 1px solid #ebebeb;
    height: 34px;
    @include flex(space-between, center);
    > div {
      cursor: pointer;
      flex: 1;
      @include flex();
      @include font(13px, #8a93a0);
      svg {
        margin-right: 2px;
      }
    }
  }
}
@media screen and (max-width: 980px) {
  .container {
    width: 100%;
  }
}
</style>
